<template>
	<view class="content-box" v-if="show">
		<view class="content-header">
			<i class="icon piciconfont icon-xiangqing"></i>
			<p class="num">{{ current + 1 }}/{{ list.length }}</p>
			<view class="close_area" @click="close"><u-icon name="close" size="28" @click="close"></u-icon></view>

		</view>

		<section class="face_wrap open">
			<view class="drop"><i class="piciconfont icon-gengduo"></i></view>
			<view class="content">
				<h1><span>智能引擎为您检索到</span><var>{{ list[current].faces.length }}</var><span>张人脸</span></h1>
				<view class="face_list">
					<image @click="findPicture(item)" class="face" v-for="item in list[current].faces" :key="item.url"
						:src="item.url">
				</view>
			</view><label>人脸识别</label>
		</section>
		<view class="content-n">
			<view class="content-s">
				<swiper :current="current" @change="swiperChange" >
					<swiper-item v-for="(item, index) in list" :key="index" class="content-img"
						>
						<image :src="item.url" mode="widthFix" style="width: 100%; height: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- <swiper :current="current" @change="swiperChange">
                <swiper-item v-for="(item, index) in list" :key="index" :class="{ 'highlighted': current === index }">
                    <image :src="item.url" mode="aspectFill" class="preview-image"></image>
                </swiper-item>
            </swiper> -->
			<!--  <scroll-view class="preview-scroll-view" scroll-x @scroll="previewScroll" @bindtouchmove="previewTouchMove">
                
                    <view v-for="(item, index) in images" :key="index" @click="previewClick(index)"
                        :class="{ 'highlighted': current === index }">
                        <image :src="item" mode="aspectFill" class="preview-image"></image>
                    </vie
               
            </scroll-view> -->
		</view>
		<view class="footer">
			<view>

				<swiper :current="current" @change="swiperChange">
					<swiper-item v-for="(item, index) in list" :key="index">
						<image :src="item.url" style="width: 100px; height: 50px;" @click="previewClick(index)"
							mode="scaleToFill" :class="{ 'highlighted': current === index, 'preview-image': true }">
						</image>
					</swiper-item>
				</swiper>
				<!--   <scroll-view class="preview-scroll-view"  scroll-x @scroll="previewScroll" @bindtouchmove="previewTouchMove">
				<view class="flex-st">
					<view  v-for="(item, index) in list" :key="index" @click="previewClick(index)"
					    :class="{ 'highlighted': current === index }">
					    <image :src="item.url" mode="aspectFill" class="preview-image"></image>
					</view>
				</view>
                   

                </scroll-view> -->
				<!-- <view class="play_btn"><i class="piciconfont icon-bofang"></i>
                    <p>播放</p>
                </view> -->
			</view>
			<section class="option livePage">
				<view class="icon_btn" @click="isShow = true"><u-icon name="rmb" size="38"></u-icon>
					<p>打赏</p>
				</view>
				<view class="icon_btn" @click="like"><u-icon :name="list[current].is_like ? 'heart-fill' : 'heart'"
						size="34" :color="list[current].is_like ? 'red' : ''"></u-icon> {{ list[current].is_like ? 1 : '点赞'
						}}
				</view>
				<view class="icon_btn"><u-icon name="shopping-cart" size="38"></u-icon>
					<p>购物车</p>
				</view>
				<view class="btn_row">
					<button :class="{ 'cart_btn': true, 'disabled': list[current].is_cart }" @click="addCart" v-if="!list[current].is_buy"
						:disabled="list[current].is_cart">{{ list[current].is_cart ? '已加入购物车' : '加入购物车' }}</button>
						<button class="buy_btn" @click="payment" v-if="!list[current].is_buy" >
						<text>
							支付0.02元
						</text>
						<text>
							查看原图
						</text>
					</button>
					<button class="disableds" @click="viewImg" v-else>
						已购买查看原图
					</button>

				</view>
				<view class="more_menu">
					<view class="more_item"><i class="piciconfont icon-dashang"></i>
						<p>打赏</p>
					</view>
					<view class="more_item"><i class="piciconfont icon-fenxiang"></i>
						<p>分享</p>
					</view>
				</view>
			</section><!---->
		</view>

		<view class="popup_wrapper" v-if="isShow">
			<view class="g_max">
				<section>
					<view class="live-reward-normal"><img @click="isShow = false"
							src=""
							class="close-btn">
						<p class="belong-to">红包归属于</p>
						<view class="target-select">
							<view class="user-swiper-wrapper">
								<view class="user-swiper-item">
									<view class="head-img"><img
											src="https://i.vzan.com/image/live/headimg/jpeg/2018/4/12/124525cb9ca9e0ac124f02819f64d33cc9bc87.jpeg">
									</view>
									<p class="user-name">小程序+直播丨徐操</p>
								</view>
							</view>
						</view>
						<!-- <p class="reward-text">打赏主播后赏金将送给主播</p>
						<p class="reward-text explain">服务声明</p> -->
						<view class="redpacket-money">
							<view class="money-list">
								<view @click="payReward(item.reward_amount)" v-for="item in rewardList" :key="item.reward_amount">{{item.reward_amount}}元</view>
								<!-- <view>2元</view>
								<view>5元</view>
								<view>10元</view>
								<view>50元</view>
								<view>100元</view> -->
							</view>
						</view>
						<!-- <p class="other-money">其他金额</p> -->
					</view>
				</section>
			</view>
		</view>
		<u-mask :show="isShow" @click="isShow = false"></u-mask>
	</view>
</template>

<script>
	import * as Get from '@/api/photo'
	import {
		wxPayment
	} from '@/core/app'

	import jWeixin from 'jweixin-module'

	import {
		ACCESS_TOKEN,
		USER_ID
	} from '@/store/mutation-types'
	import store from '@/store'

	export default {
		props: {
			// 购物车按钮样式 1 2 3
			list: {
				type: Array,
				// default: 1
			},
			current: {
				type: Number,
			},
			isDeta: {
				type: Boolean,
			},
			show: Boolean,
			deleteFun: {
				default: () => {}
			},
			live_id: {
				type: String
			}
		},
		data() {
			return {
				isShow: false,
				// current: 0,
				rewardList:[{
					reward_amount:1,
				},{
					reward_amount:2,
				},{
					reward_amount:5,
				},{
					reward_amount:10,
				},{
					reward_amount:50,
				},{
					reward_amount:100,
				}],
				images: [
					// 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i1/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i7/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg',
					// 'https://gtd.alicdn.com/sns_logo/i1/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg'
				]
			};
		},
		onLoad(options) {
			// console.log(this.list, "4435454")
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			console.log(this.list, "list")
		},
		methods: {
			// 已购买查看原图
			viewImg(){
				this.list[this.current]
			},
			findPicture(item) {
				// uni.switchTab({
				//   url: 'pages/facialDetails/facialDetails', // 要跳转的Tab页面路径
				//   path:'pages/facialDetails/facialDetails'
				// });
				let url = item.url;
				let id = item.id;
				console.log(url)
				uni.setStorageSync('imageURL', url);
				uni.navigateTo({
					url: '/pages/facialDetails/facialDetails' + `?id=${id}&live_id=${this.live_id}` // 要跳转的页面路径
				});
				// this.$router.push({path:'pages/facialDetails/facialDetails'})
			},
			close() {
				console.log(2323)
				// this.$nextTick(() => {
				this.$emit('close', false);
				// });

			},
			swiperChange(e) {
				this.current = e.detail.current;
			},
			previewClick(index) {
				this.current = index;
			},
			previewSwiperChange(e) {
				this.current = e.detail.current;
			},
			previewScroll(e) {
				const scrollLeft = e.detail.scrollLeft;
				const itemWidth = 50; // 每个预览图的宽度
				const index = Math.round(scrollLeft / itemWidth);
				this.current = index;
			},
			like() {
				// 点赞
				console.log(this.list[this.current], 'list[current].faces')
				Get.addLikes({
						id: this.list[this.current].id,
						live_id: this.live_id
					})
					.then(res => {
						this.list[this.current].is_like = true;
						console.log(res, "res")
						// app.infrom = res.data || {};
						// console.log(app.infrom,"result")
					})
			},
			addCart() {
				Get.addCart({
						live_id: this.live_id,
						ids: this.list[this.current].id,
						type: 'photo_live'
					})
					.then(res => {
						if (res.code == 1) {
							this.$toast('加入购物车成功')
							this.list[this.current].is_cart = true;
						}

						// this.list[this.current].is_like = true;
						// console.log(res, "res")
						// app.infrom = res.data || {};
						// console.log(app.infrom,"result")
					})
			},

			payment() {
				let id = this.list[this.current].id
				let app = this;
				// var jWeixin = require('jweixin-module')  


				// 支付
				Get.payDirectPhotoBuy({
					live_id: this.live_id,
					id: id,
				}).then(result => {
					console.log(result.data.prepay_id, "result")
					WeixinJSBridge.invoke(
						'getBrandWCPayRequest', {
							"appId": result.data.app_id, //公众号ID，由商户传入     
							// prepay_id:result.data.prepay_id,
							"timeStamp": result.data.timeStamp, //时间戳，自1970年以来的秒数     
							"nonceStr": result.data.nonceStr, //随机串     
							"package": `prepay_id=${result.data.prepay_id}`,
							"signType": "MD5", //微信签名方式：     
							"paySign": result.data.paySign //微信签名 
						},
						res => {
							if (res.err_msg == "get_brand_wcpay_request:ok") {
								// 使用以上方式判断前端返回,微信团队郑重提示：
								//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
								app.$toast('支付成功!')
								
								app.list[app.current].is_buy = true;
							}
						})


				})
			},
			// 打赏
			payReward(amount){
				Get.payReward({
					live_id: this.live_id,
					reward_amount: amount,
				}).then(result=>{
					console.log(result)
				})
			},
			
			
			// 订单提交成功后回调
			onSubmitCallback(result) {
				const app = this
				// 发起微信支付
				// if (result.data.payType == PayTypeEnum.WECHAT.value) {
				wxPayment(result.data)
					.then(() => app.$success('支付成功'))
					.catch(err => app.$error('订单未支付'))
					.finally(() => {
						// app.disabled = false
						// app.navToMyOrder()
					})
				// }
				// 余额支付
				// if (result.data.payType == PayTypeEnum.BALANCE.value) {
				//   app.$success('支付成功')
				//   app.disabled = false
				//   app.navToMyOrder()
				// }
			},
			onSubmitOrder() {
				const app = this
				if (app.disabled) {
					return false
				}
				// 表单验证
				if (!app.onVerifyFrom()) {
					return false
				}
				// 按钮禁用
				app.disabled = true
				// 请求api
				CheckoutApi.submit(app.options.mode, app.getFormData())
					.then(result => app.onSubmitCallback(result))
					.catch(err => {
						if (err.result) {
							const errData = err.result.data
							if (errData.is_created) {
								app.navToMyOrder()
								return false
							}
						}
						app.disabled = false
					})
			},

		}
	};
</script>

<style lang="scss" scoped>
	.content-box {
		overflow: hidden;
		position: fixed;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: #000;
		z-index: 300;
	}

	.preview-scroll-view {
		white-space: nowrap;
		overflow-x: auto;
		display: flex;
		width: 70%;

	}

	.phone {
		width: 100%;

		// height: 100%;
	}

	.preview-scroll-view view {
		margin-right: 10px;
	}

	.flex-st {
		display: flex;
	}

	.preview-image {
		width: 50px;
		height: 50px;
	}


	.highlighted {
		// margin-right: 10rpx;
		border: 2rpx solid #fff;
		// width: 50px !important;
		// height: 50px !important;



	}

	.content-header {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx;
		font-size: 22rpx;
		z-index: 4;
		transition: opacity .2s;
		color: #fff;
	}

	.face_wrap {
		position: absolute;
		top: 140rpx;
		right: 0;
		z-index: 2;
		display: flex;
		height: 140rpx;
		line-height: 1.6;
		transform: translateX(0);
		transition: all .3s;

		h1 {
			margin-bottom: 20rpx;
			font-size: 20rpx;
			text-align: center;
		}

		label {
			position: relative;
			top: 0;
			right: 0;
			z-index: 2;
			box-sizing: border-box;
			width: 40rpx;
			height: 100%;
			padding: 12rpx;
			font-size: 20rpx;
			line-height: normal;
			color: #fff;
			background: linear-gradient(135deg, #00abff, #006cff);
		}
	}

	.face_wrap .drop {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 40rpx;
		height: 100%;
		border-radius: 20rpx 0 0 20rpx;
		background-color: #32336a;
		cursor: pointer;
	}

	.face_wrap.open .content {
		width: 280rpx;
		background: url(../../static/pic-bg.png)no-repeat;
		background-size: calc(100% + 20rpx) 100%;
		background-position: -20rpx 0;

		h1 {
			font-size: 22rpx;
			color: #fff;
		}
	}

	.face_list {
		box-sizing: border-box;
		max-width: 100%;
		max-height: 100%;
		padding-left: 0.1rem;
		white-space: nowrap;
		overflow: auto hidden;

		.face {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 50%;
			background-color: #00abff;
			cursor: pointer;
		}
	}

	.content-n {
		// height: 100vh;
		position: relative;
		// top: 30%;


		.content-s {
			position: absolute;
			width: 100%;
			height: 100%;
			// top: 50%;
			// transform: translate(0, -25%);
			// z-index: 400;
		}

		uni-swiper {
			height: 100vh;
			//       min-height: 540rpx;
			// max-height: 600rpx;
		}

		uni-image {

			// >view {
			//     background-size: 100% 100% !important;
			// }
			/deep/ {
				view {
					// background-size: 100% 100% !important;
				}
			}



		}


		.content-img {
			width: 100vw;
			vertical-align: middle;
			align-items: center;
			justify-content: center;
			display: flex;
		}

		// position: absolute;
		// top: 50rpx;

	}

	.footer {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 1113;
		padding-bottom: 0.06rem;
		transition: all .2s;

		uni-swiper {
			height: 140rpx;
		}

		uni-swiper-item {
			width: 200rpx !important;
			// height: 50px !important;
		}

		uni-image {

			// >view {
			//     background-size: 100% 100% !important;
			// }
			/deep/ {
				view {
					// background-size: 100% 100% !important;
				}
			}



		}

		.option {
			padding: 0 26rpx 26rpx 26rpx;
			justify-content: space-between;
			height: 140rpx;
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			box-sizing: border-box;
			position: relative;
			pointer-events: auto;

			.btn_row {
				display: flex;
				font-size: 18rpx;

				.cart_btn {
					width: 180rpx;
					height: 90rpx;
					line-height: 90rpx;
					background: linear-gradient(270deg, #ff8d00, #ffdc00);
					border-radius: 60rpx 0 0 60rpx;

					font-size: 26rpx;
					color: #fff;
				}

				.disableds {
					font-size: 26rpx;

					width: 380rpx;
					height: 90rpx;
					line-height: 90rpx;
					border-radius: 160rpx;
					background: grey;
					color: #fff;
				}

				.cart_btn.disabled {
					width: 200rpx;
					background: grey;
				}

				.buy_btn {
					width: 230rpx;
					height: 90rpx;
					background: linear-gradient(270deg, #006cff, #00a5ff);
					border-radius: 0 60rpx 60rpx 0;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					color: #fff;
					font-size: 26rpx;
					padding-bottom: 12rpx;

					>text {
						height: 24px;
					}
				}
			}

			.icon_btn {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				cursor: pointer;
				color: #fff;
			}

			.more_menu {
				position: absolute;
				bottom: calc(100% + 0.15rem);
				left: 10rpx;
				z-index: 5;
				width: 180rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				color: #202124;
				background: #fff;
				pointer-events: none;
				opacity: 0;
				transition: opacity .2s;
			}

			.more_menu.show {
				opacity: 1;
				pointer-events: auto;
			}
		}
	}


	.popup_wrapper {
		position: fixed;
		// width: 100%;
		// height: 100%;
		z-index: 999911;

		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.live-reward-normal {
			box-sizing: border-box;
			width: 600rpx;
			height: 800rpx;
			background-image: url(../../static/reward-bg.png);
			background-size: 100% 100%;
			background-repeat: no-repeat;
			padding-top: 0.34rem;
			position: relative;
			margin: auto;


			.close-btn {
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.belong-to {
				text-align: center;
				color: #ffae00;
				font-size: 34rpx;
				// line-height: 1em;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.target-select {
				width: 100%;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.user-name {
				width: 100%;
				text-align: center;
				// margin-bottom: 0.05rem;
				color: #fff;
				font-size: 26rpx;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.head-img {
				width: 100%;
				text-align: center;
				overflow: hidden;
				position: relative;

				margin-bottom: 20rpx;

				img {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
				}
			}

			.money-list {
				width: 80%;
				margin: 0 auto;
				margin-top: 200rpx;
				display: flex;
				flex-wrap: wrap;
				// height: ;
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;

				view {
					box-sizing: border-box;
					width: 30%;
					height: 80rpx;
					border: 1px solid #ea0e28;
					margin-bottom: 20rpx;
					margin-left: 2.5%;
					border-radius: 10rpx;
					text-align: center;
					line-height: 80rpx;
					color: #d74751;
					font-size: 30rpx;
				}
			}







		}



	}
</style>